<template>
  <div class="about_us">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('关于我们')}}</div>
      </div>
    </div>
    <div class="about_us_wrapper">
      <div class="content" style="border-bottom: 20px">
        <img class="image" src="../../../../assets/my/product_logo.png">
      </div>
      <div class="content">
        <label class="label">{{ $t('联系电话') }} </label>
        <span class="link" @click="copyValue(info.servicePhone)">{{ info.servicePhone }}</span>
      </div>
      <div class="content">
        <label class="label">{{ $t('邮箱') }}</label>
        <span class="link"  @click="copyValue(info.mail)">{{ info.mail }}</span>
      </div>
      <!--      关于我们-->
      <div class="describe">
        {{ info.aboutContent }}
      </div>
    </div>
  </div>
</template>

<script>
import {fetchAboutInfo} from '@/api/my'
import {ref} from "vue";
import {useStore} from "vuex";
import {Toast} from "vant";
import {useI18n} from "vue-i18n";

export default {
  setup() {
    const info = ref({})
    const store = useStore()
    const {t} = useI18n()
    const productName = localStorage.getItem('productName')
    const fetchAbout = async () => {
      const res = await fetchAboutInfo({
        loanProductName: productName
      })
      if (res.code === 1 && res.data) {
        info.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    function copyValue(text) {
      if (text) {
        let input = document.createElement("input");
        input.value = text
        document.body.appendChild(input);
        input.select()
        document.execCommand('copy')
        Toast({
          message: t('复制成功')
        })
        document.body.removeChild(input);
      }
    }

    fetchAbout()
    return {
      info,
      copyValue,
      productName
    }
  }
}
</script>

<style scoped lang="less">
.about_us {
  background-color: #F7F7F7;
  height: 100vh;
  box-sizing: border-box;
  .about_us_wrapper {
    margin-top: -150px;
    box-sizing: border-box;
    background-color: #F7F7F7;
    border-radius: 10px;
    .wrapper_bg {
      height: 224px;
      width: 100%;
      position: relative;
      overflow: hidden;

      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: #FFFFFF;
      }
    }


    .content {
      box-sizing: border-box;
      font-size: 16px;
      margin-bottom: 10px;
      position: relative;
      padding:  10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E6E6E6;

      .label {
        margin-right: 10px;
      }

      .link {
        text-align: right;
        flex: 1;
        white-space: pre-wrap;
        word-break: break-all;
        color: #15B3B2;
      }

      .image {
        width: 72px;
        height: 72px;
        border-radius: 6px;
        margin: 0 auto;
        padding-top: 30px;
      }
    }

    .describe {
    font-size: 14px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

</style>
